<template>
    <div>
        <div class="index-logo">
            <div class="logo">
                <img src="../../assets/img/index_bg.png">
            </div>
        </div>
        <div class="forms">
            <div class="item flex_r_b">
                <input type="text" name="mobile" value="" placeholder="手机号" v-model="mobile">
            </div>
            <div class="item02 flex_r_b">
                <div class="item flex_r_b">
                    <input type="text" name="code" value="" placeholder="验证码" v-model="code">
                </div>
                <div class="getcode" @click="getcode()"  v-if='!showdjs'>获取验证码</div>
                <div class="getcode01" v-else>{{djs}}</div>
            </div>
            <div class="item01 tips" v-html="tipscontent"> </div>
        </div>
        <div class="flex_r_b item_bottom">
            <div class="ignore" @click="ignores()">跳过</div>
            <input type="button" class="red_btn" value="绑定手机号" @click="bindtel()">
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                mobile:"",
                code:"",
                showdjs:false,
                djs:"",
                tipscontent:""
            }
        },
        mounted(){
            this.gethtml();
        },
        methods:{
            ignores(){
                sessionStorage.setItem("bindtelsession",true);
                this.$router.go(-1);
            },
            gethtml(){
                var that=this;

                that.request1.post1({
                    url: that.Url + "api/user.index/getmobileart",
                    params: {
                        mobile: that.mobile,
                        code:that.code
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.tipscontent=res.data.data.content
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            bindtel(){
                var that=this;

                that.request1.post1({
                    url: that.Url + "api/user.index/changemobile",
                    params: {
                        mobile: that.mobile,
                        code:that.code
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.$toast.success("绑定成功");
                            that.$router.go(-1);
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            countdown() {
                let that=this;
                let djs=60;
                that.showdjs=true;
                that.djs=djs+'s';

                that.timer=setInterval(function(){
                    djs--;
                    if(djs==0){
                        clearInterval(that.timer);
                        that.showdjs=false;
                        return false;
                    }
                    that.djs=djs+'s';
                },1000)
            },
            //获取验证码
            getcode:function(){
                var that=this;
                //手机号正确
                if(!that.mobile){
                    that.$toast('请填写手机号');
                    return false
                }
                if(!(/^1[3456789]\d{9}$/.test(that.mobile))){
                    that.$toast('手机号有误');
                    return false
                }
                that.$axios.post(that.Url+'api/sms/send',{       // 还可以直接把参数拼接在url后边
                    mobile: that.mobile,
                    event:"changemobile"
                }).then(function(res){
                    if(res.data.code == 1){
                        that.$toast.success(res.data.msg);
                        that.countdown()
                    }else {
                        that.$toast(res.data.msg)
                    }
                }).catch(function (error) {
                    that.$toast(error.data.msg)
                })
            },
        }
    }
</script>

<style scoped>
    .index-logo {
        display: -webkit-box;
        margin-top: 10px;
    }
    .index-logo .logo {
        -webkit-box-flex: 1;
        margin-right: 11%;
        margin-left: 20px;
        vertical-align: middle;
        min-height: 30px;
        line-height: 24px;
    }
    .index-logo .logo img {
        display: inline-block;
        width: 100%;
    }
    .forms{
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 15px;
        border-radius: 4px;
    }
    .forms .item{
        height: 36px;
        border-radius: 4px;
        font-size: 13px;
        border: 1px solid #e5e5e5;
        padding: 0 4%;
        background: #f9f9fb;
        width: 92%;
        display: block;
        margin-bottom: 15px;
    }
    .forms .item:first-child{
        margin-top: 0
    }
    .forms label{
        width: 24px;
    }
    .forms .item input{
        line-height: 36px;
    }
    .hide{
        display: none;
    }
    .forms .iconfont{
        color: #eee;
        font-size: 24px;
    }
    .forms .icon-zhanghao{
        width: 24px;
        height: 24px;
        border: 1px solid #eeeeee;
        border-radius: 50%;
        font-size: 20px;
        text-align: center;
    }
    .forms input{
        width: calc(100% - 30px);
        font-size: 15px;
        color: #333
    }
    .forms .item01{
        padding: 0 15px 0 5px;
        box-sizing: border-box;
        font-size: 14px;
        color: #999999
    }
    .forms .item01 .regist{
        font-size: 12px;
        color: #ff5641;
    }
    .forms .item02{
        margin-top: 12px
    }
    .forms .item02 .item{
        width: calc(100% - 84px)
    }
    .forms .item02 .getcode{
        width: 80px;
        color: #ff5641;
        font-size: 12px;
        text-align: center;
        text-decoration: underline;
    }
    .red_btn {
        border-radius: 4px;
    }
    .red_btn {
        background: #fc5d4d;
        color: #fff;
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        margin: 0;
        box-shadow: 0 5px 10px #f6a59f;
    }
    .item01.tips{
        font-size: 12px;
        color: #ff5641;
    }
    .item_bottom{
        width: 90%;
        margin: 20px 5% 100px;
    }
    .item_bottom .ignore{
        width: 70px;
        border: 1px solid #ddd;
        text-align: center;
        height:38px;
        line-height: 38px;
        border-radius: 4px;
        box-sizing: border-box;
        columns:#999;
    }
    .item_bottom .red_btn{
        width: calc(100% - 80px);
    }
</style>